<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">详细工资报表</h3>
                        </div>
                        <div class="panel-body">
                            <!-- 查询条件 -->
                            <div class="row">
                                <div class="col-md-12">
                                    <form class="form-inline" id="searchForm">
                                        <div class="form-group">
                                            <label for="startDate">开始日期:</label>
                                            <input type="date" class="form-control" id="startDate" value="{:date('Y-m-01')}">
                                        </div>
                                        <div class="form-group">
                                            <label for="endDate">结束日期:</label>
                                            <input type="date" class="form-control" id="endDate" value="{:date('Y-m-d')}">
                                        </div>
                                        <div class="form-group">
                                            <label for="userId">员工:</label>
                                            <select class="form-control" id="userId">
                                                <option value="">全部员工</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <button type="button" class="btn btn-primary" onclick="Controller.api.searchDetail()">
                                                <i class="fa fa-search"></i> 查询
                                            </button>
                                            <button type="button" class="btn btn-success" onclick="Controller.api.exportDetail()">
                                                <i class="fa fa-download"></i> 导出
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- 统计信息 -->
                            <div class="row" style="margin-top: 20px;">
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-blue"><i class="fa fa-users"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">员工数量</span>
                                            <span class="info-box-number" id="employeeCount">0</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-green"><i class="fa fa-money"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">总工资</span>
                                            <span class="info-box-number" id="totalWage">￥0.00</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-yellow"><i class="fa fa-clock-o"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">总工时</span>
                                            <span class="info-box-number" id="totalHours">0小时</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-red"><i class="fa fa-file-text"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">报工次数</span>
                                            <span class="info-box-number" id="reportCount">0</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 详细数据表格 -->
                            <div class="row" style="margin-top: 20px;">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table id="detailTable" class="table table-striped table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>员工姓名</th>
                                                    <th>用户名</th>
                                                    <th>订单号</th>
                                                    <th>产品名称</th>
                                                    <th>产品型号</th>
                                                    <th>工序</th>
                                                    <th>生产数量</th>
                                                    <th>工作时长</th>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                    <th>计件工资</th>
                                                    <th>计时工资</th>
                                                    <th>总工资</th>
                                                    <th>工作日期</th>
                                                    <th>审核时间</th>
                                                    <th>备注</th>
                                                </tr>
                                            </thead>
                                            <tbody id="detailTableBody">
                                                <!-- 动态加载数据 -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 